<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        margin: 100px;
        width: 100px;
        height: 100px;
        background-color: red;
        border: 20px solid orange;
    }
</style>
<body>

    <div class="box">

    </div>

    <script>

        var box = document.querySelector('.box')

        console.log(box.clientWidth); // 获取元素的宽度  padding + content
        console.log(box.clientHeight); // 获取元素的高度  padding + content
        console.log(box.offsetWidth); // 获取元素的宽度  padding + content + border
        console.log(box.offsetParent); // 获取元素的定位父元素
        console.log(box.offsetLeft); // 获取元素距离定位父元素的距离
        console.log(box.offsetTop); // 获取元素距离定位父元素的距离
        console.log(box.offsetHeight); // 获取元素的高度  padding + content + border
        console.log(box.scrollWidth); // 获取元素的真实宽度  content + padding + 溢出的内容
        console.log(box.scrollHeight); // 获取元素的真实高度  content + padding + 溢出的内容
        console.log(box.scrollLeft); // 获取元素被卷去的左侧距离
        console.log(box.scrollTop); // 获取元素被卷去的上侧距离
        console.log(box.clientLeft); // 获取元素左边框的宽度
        console.log(box.clientTop); // 获取元素上边框的宽度
        console.log(box.getBoundingClientRect().width); // 获取元素宽度  content + padding + border + 滚动条的
        console.log(box.getBoundingClientRect().height); // 获取元素高度  content + padding + border + 滚动条的
        console.log(box.getBoundingClientRect().left); // 获取元素距离视窗左侧的距离
        console.log(box.getBoundingClientRect().top); // 获取元素距离视窗上侧的距离
        console.log(box.getBoundingClientRect().right); // 获取元素距离视窗右侧的距离
        console.log(box.getBoundingClientRect().bottom); // 获取元素距离视窗下侧的距离
        console.log(box.getClientRects().length); // 获取元素的所有盒模型集合


    </script>
</body>
</html>